<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	<style>
		body{
			background: #f9f9f9;
			color: #666;
			font-size: 16px;
			font-family:arial,"Hiragino Sans GB", "Microsoft YaHei","微軟正黑體","儷黑 Pro", sans-serif;
		}
		.personmsg-con{
			width: 80%;
			min-width: 900px;
			margin: 0 auto 40px auto;
		}
		.fr{
			float: right;
		}
		.top-log{
			padding: 30px 0;
		    height: 31px;
		    line-height: 31px;
		    position: relative;
		}
		.top-log .na-img-area{
			position: absolute;
			right: 36px;
   			top: 100px;
			width: 80px;
		    height: 80px;
		    border: 1px solid #e6e6e6;
		    border-radius: 50%;
		    overflow: hidden;
		    padding: 4px;
		}
		.na-img-bg-area{
			background: url(img/n-avator-bg.png) 0 0 no-repeat;
			width: 100%;
		    height: 100%;
		    line-height:80px;
		    border-radius: 50%;
		    text-align: center;
		    font-size: 16px;
		    vertical-align: middle;
		    cursor: pointer;
		}
		
		.na-img-bg-area span{
			display: none;
			color: #fff;
		}
		.na-img-bg-area:hover{
			background: #ccc;
		}
		.na-img-bg-area:hover span{
			display: block;
		}
		.pick-box{
			display: none;
			width: 300px;
			min-height: 200px;
			height: auto;
			border-radius: 8px;
			background: #fff;
			border: 1px solid #ccc;
			position: absolute;
			top: 200px;
			right: -60px;
		}
		.pick-box p{
			text-align: center;
		}
		.pick-box .xiantiao{
			display: block;
			width: 98%;
			height: 1px;
			border-bottom: 1px solid #ccc;
			margin: 0 auto;
		}
		.pick-box ul li{
			display: block;
			float: left;
			padding: 10px;
			cursor: pointer;
		}
		.pick-box ul li img{
			width:80px;
			border-radius: 15%;
		}
		.pick-box ul li:hover{
			transform: scale(1.15);
			transition: .5s;
		}
		.btn-box{
			width: 100%;
			text-align: center;
			font-size: 14px;
			color: #fff;
		}
		.btn-box .close{
			display: inline-block;
			width: 100px;
			height: 35px;
			line-height: 35px;
			border-radius: 8px;
			background: #909399;
			margin: 10px;
			color: #fff;
		}
		.btn-box .save{
			display: inline-block;
			width: 100px;
			height: 35px;
			line-height: 35px;
			border-radius: 8px;
			background: #4B8BF5;
			color: #fff;
			margin: 10px;
		}
		
		.top-log .fl_l{
			float: left;
			color: #ff7e00;
			font-size: 20px;
			font-weight: 600;
		}
		.top-log .fl_r{
			float: right;
			font-size: 16px;
		}
		.layout .n-main-nav{
			display: block;
			height: 50px;
			line-height: 50px;
			margin-left: 100px;
			text-align: center;
			width: 100px;
		}
		.layout .n-main-nav a{
			display: block;
			height: 20px;
			font-size: 16px;
			line-height: 20px;
			color: #ff7e00;
			font-weight: bolder;
		}
		.layout .n-nav-corner{
			display: inline-block;
			width: 23px;
		    height: 12px;
		    margin-top: 19px;
		    margin-bottom: -2px;
		    background: url(img/n-layout-corner.png)  0 0 no-repeat;
		}
		.layout .n-frame{
			background: #fff;
			border: 1px solid #e6e6e6;
			height: 300px;
			border-radius: 10px;
			padding: 34px 34px 34px 34px;
		}
		.layout .n-frame .main-l{
			float: left;
			width: 300px;
		}
		.layout .n-frame .main-l div{
			padding: 100px;
			text-align: center;
			font-size: 16px;
		}
		.layout .n-frame .main-l div p:last-child{
			color: #4a90e3;
			font-size: 18px;
			margin-top: 10px;
		}
		.layout .n-frame .main-r{
			float: left;
			width: 390px;
		}
		.layout .n-frame .main-r .fdata{
			padding-left: 20px;
		    line-height: 60px;
		    overflow: hidden;
		}
		.layout .n-frame .main-r .fdata .basemsg{
			float: right;
			color: rgb(74, 144, 227);
		}
		.layout .n-frame .main-r .fdata h3{
			font-weight: 700;
			color: #333;
		}
		.layout .n-frame .main-r .fdata p span:last-child{
			color: #333;
			margin-left: 10px;
		}
		.editMsgLayer-con{
			width: 85%;
			display: none;
			text-align: center;
		}
		.editMsgLayer-con .layui-form-item {
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<!-- 修改个人信息弹窗开始 -->
	<div class="editMsgLayer-con" id="editPerLayer">
		<form class="layui-form" action="">
		  <div class="layui-form-item">
		  	<div class="layui-block">
		  		<label class="layui-form-label">用户名</label>
			    <div class="layui-input-block">
			      <input type="text" id="editUserName" name="editUserName" class="layui-input layui-disabled" disabled>
			    </div>
		  	</div>
		  </div>
		  <div class="layui-form-item">
		    <div class="layui-block">
		    	<label class="layui-form-label">真实姓名</label>
			    <div class="layui-input-block">
			      <input type="text" id="editRealName" name="editRealName" lay-verify="required" autocomplete="off" placeholder="请输入真实姓名" class="layui-input">
			    </div>
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <div class="layui-block">
		    	<label class="layui-form-label">性别</label>
			    <div class="layui-input-block">
			      <input class="sex" type="radio" name="sex" value="男" title="男" checked="">
			      <input class="sex" type="radio" name="sex" value="女" title="女">
			    </div>
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <div class="layui-block">
		      <label class="layui-form-label">联系电话</label>
		      <div class="layui-input-block">
		        <input type="tel" id="Editpone" name="Editpone" lay-verify="Editpone" class="layui-input layui-disabled" disabled>
		      </div>
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <div class="layui-block">
		      <label class="layui-form-label">出生日期</label>
		      <div class="layui-input-block">
		        <input type="text" name="editBirthday" id="editBirthday" lay-verify="required" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		  </div>
		</form>
	</div>
	<!-- 修改个人信息弹窗结束 -->
	<div class="personmsg-con">
		<div class="top-log">
			<a class="fl_l" href="javascrip:">心理健康账号</a>
			<a class="fl_r" href="loadhomepage.action">返回</a>
			<div class="na-img-area">
				<div class="na-img-bg-area" id="naimgbgarea">
					<span id="setuserphoto">编辑头像</span>
				</div>
			</div>
			<div class="pick-box" id="pickbox">
				<p>设置头像</p>	
				<span class="xiantiao"></span>
				<ul>
					<li><img src="img/avatar01.png"/></li>
					<li><img src="img/avatar02.png"/></li>
					<li><img src="img/avatar03.png"/></li>
					<li><img src="img/avatar04.png"/></li>
					<li><img src="img/avatar05.png"/></li>
					<li><img src="img/avatar06.png"/></li>
				</ul>
				<div class="btn-box">
					<a href="javascript:" id="btnphotoclose" class="close">取消</a>
					<a href="javascript:" id="btnphotosave" class="save">保存</a>
				</div>
			</div>
		</div>
		
		<div class="layout">
			<div class="n-main-nav">
				<a href="javascript:">个人信息</a>
				<em class="n-nav-corner"></em>
			</div>
			<div class="n-frame">
				<div class="main-l">
					<div>
						<p>当前用户:</p>
						<p id="userName"></p>
					</div>
				</div>
				<div class="main-r">
					<div class="fdata">
						<a class="basemsg" href="javascript:" id="editPersonal"><i class="layui-icon">&#xe642;</i>编辑</a>
						<h3>基础资料</h3>
					</div>
					<div class="fdata">
						<p><span>真实姓名：</span><span id="realName">请设置姓名</span></p>
					</div>
					<div class="fdata">
						<p><span>性别：</span><span id="sex">请设置性别</span></p>
					</div>
					<div class="fdata">
						<p><span>联系电话：</span><span id="tell">请设置联系电话</span></p>
					</div>
					<div class="fdata">
						<p><span>出生年月：</span><span id="birthday">请设置出生年月</span></p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	layui.use(['form', 'laydate'], function(){
	    var form = layui.form,
	    layer = layui.layer,
	    laydate = layui.laydate;
	    
	    //日期
		laydate.render({
		    elem: '#editBirthday'
		});
	    
		$.ajax({
			type : 'get',
			url : 'loadpersonalmessage.action',
			datatype : 'json',
			success : function(personalMsg) {
				if (personalMsg.code == 0) {
					var res = personalMsg.data;
					$("#userName").text(res[0].username);
					$("#realName").text(res[0].realname);
					$("#sex").text(res[0].sex);
					$("#tell").text(res[0].phone);
					$("#birthday").text(res[0].birthday);
					if(res[0].headPortrait != null && res[0].headPortrait != ""){
						$("#naimgbgarea").css("background","url("+res[0].headPortrait +") 0 0 no-repeat");
					}
					
					$("#editUserName").val(res[0].username);
					$("#editRealName").val(res[0].realname);
					$("#Editpone").val(res[0].phone);
					$("#editBirthday").val(res[0].birthday);
					$(".sex").each(function(){
						if($.trim($(".sex")[0].value) == $.trim(res[0].sex)){
							$(".sex")[0].checked = true;
							form.render("radio");
						}
						if($.trim($(".sex")[1].value) == $.trim(res[0].sex)){
							$(".sex")[1].checked = true;
							form.render("radio");
						}
					});
				}else {
					layer.msg("请登录！", {icon:2});
					window.location.href = "loadhomepage.action";
				}
			},error:function(){layer.alert("个人信息加载失败！", {icon:2});}
		});
		
		$("#editPersonal").click(function(){
			layer.open({
			  type: 1,
			  shade: 0.5,
			  scrollbar: false,
			  title: '修改个人信息',
			  area: ['460px', '420px'], //宽高
			  content: $('#editPerLayer'),
			  btn: ['保存', '取消'],
			  yes: function(index){
				var editRealName = $("#editRealName").val();
				var editSex = $("input[name='sex']:checked").val();
				var editBirthday = $("#editBirthday").val();
				if(editRealName == null || editRealName == ""){
					layer.msg("请填写真实姓名！");
					return;
				}
				if(editBirthday == null || editBirthday == ""){
					layer.msg("请选择出生日期！");
					return;
				}
				$.ajax({
					url: 'edituserinfo.action',  
			        type: "get", 
			        dataType: "json",  
			        data:{realName:editRealName,sex:editSex,birthday:editBirthday},
			        success: function (data) {
		    	          if (data.code == 1) {
		    	        	  layer.confirm(data.msg, {
								  btn: ['确定'],
								  icon:1
							  }, function(){
								 layer.closeAll();
								 window.location.reload();
								 $(".editMsgLayer-con").css("display","none");
							   });
		    	          }else {  
		    	        	  layer.alert("个人信息修改失败！",2);
		    	        	  return false;
		    	          }
			        }
				});
			  }
			});
		});
		
		//点击更换头像
		var checkimgurl = "";
		$("#setuserphoto").click(function(){
			$(".pick-box").show();
		});
		$("#btnphotoclose").click(function(){
			$(".pick-box").hide();
		});
		$(".pick-box li img").click(function(){
			$(this).css("border-radius","50%");
			checkimgurl = $(this).attr('src');
			$(this).parent().css("background","#ccc");
			$(this).parent().siblings().children().css("border-radius","15%");
			$(this).parent().siblings().css("background","#fff");
		});
		$("#btnphotosave").click(function(){
			$.ajax({
				url: 'savehead.action',  
		        type: "get", 
		        dataType: "json",  
		        data:{headPortrait:checkimgurl},
		        success: function (data) {
	    	          if (data.code == 1) {
	    	        	  layer.confirm(data.msg, {
							  btn: ['确定'],
							  icon:1
						  }, function(){
							 window.location.reload();
						  });
	    	          }else {  
	    	        	  layer.alert(data.msg,{icon: 2});
	    	        	  return false;
	    	          }
		        },
		        error: function(){layer.alert("头像修改失败！",{icon:2})} 
			});
		});
		
		
	});
	</script>
</body>
</html>